<script setup lang="ts">
import { reactive, provide } from 'vue';
import { myStore } from '@/store/my';
import UserInfoPage from '@/pages/My/components/UserInfoPage/index.vue';
const store = myStore();
const state = reactive({
  show: false,
});
const props = defineProps({
  item: {
    type: Object as any,
  },
  page: {
    type: String,
  },
});
const closeChange = () => {
  state.show = false;
  store.getResumeDetail();
};
provide('popup', {
  closeChange,
});
</script>
<template>
  <div class="person-info">
    <div class="info-left">
      <h3>
        {{ props.item.user_name
        }}<img
          src="@/assets/img/my/icon-feedback.png"
          @click="state.show = true"
          v-if="props.page !== 'preview'"
        />
      </h3>
      <p>
        {{ props.item.work_year }} ｜ {{ props.item.highest_education }} ｜ {{ props.item.age }}
      </p>
    </div>
    <img :src="props.item.it_head" />
  </div>

  <!--切换城市弹窗-->
  <van-popup
    v-model:show="state.show"
    position="top"
    duration="0"
    :style="{ width: '100%', height: '100%' }"
  >
    <UserInfoPage></UserInfoPage>
  </van-popup>
</template>
<style scoped>
.person-info {
  padding: 0.99rem 0 1.41rem;
  margin: 0 0.72rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f3f3f3;
}
.person-info img {
  width: 3.19rem;
  height: 3.19rem;
  border-radius: 50%;
}
.info-left h3 {
  font-size: 1.28rem;
  line-height: 1.28rem;
  font-weight: 400;
  color: #333333;
  margin-bottom: 0.64rem;
  display: flex;
  align-items: flex-end;
}
.info-left img {
  width: 1rem;
  height: 1rem;
  margin-left: 0.32rem;
}
.info-left p {
  font-size: 0.69rem;
  line-height: 0.69rem;
  font-weight: 300;
  color: #666666;
}
</style>
